<template>
	<!-- 分享推广 完成 -->
	<view class="container">
		<!-- 首页 -->
		<my-header title='分享推广' rights='推广规则'></my-header>

		<!-- body -->
		<view class="body">
			<!-- first -->
			<view class="info">
				<view class="username"
					:class="{'.share-btn1':currentBackground === 'bg1', '.share-btn2':currentBackground === 'bg2'}">
					<view class="user-left">
						推广码
					</view>
					<view class="user-center">{{shareData.tgm}}</view>
					<view class="user-right" @click="onExtend"> 复制</view>
				</view>
				<view class="username"
					:class="{'.share-btn3':currentBackground === 'bg1', '.share-btn4':currentBackground === 'bg2'}">

					<view class="user-left">推荐人</view>
					<view class="user-center">{{shareData.tjr}}</view>
					<view class="user-right">

					</view>
				</view>
				<view class="man">
					<view class="">
						已推广0人，共0个积分
					</view>
					<view class="bg" :class="{'btn-bg1':currentBackground === 'bg1', 'btn-bg2':currentBackground === 'bg2'}"
						@click="goPoints">
						积分兑换
					</view>

				</view>
			</view>
			<!-- two -->
			<view class="code">
				<image src="@/static/style1/jx2.png" mode="widthFix"></image>
			</view>
			<!-- 按钮 -->
			<view class="btn">
				<view class="btn-item" :style="{backgroundImage:(currentBackground === 'bg1' ? item.imageBg1 : item.imageBg2)}"
					v-for="(item, index) in btnItem" :key="index">
					{{item.btn}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				shareData: {
					tgm: 'AGfgk5m2t',
					tjr: '宋青'
				},
				itemBg: {
					imageBg1: 'url(' + require('@/static/style1/zh14.png') + ')',
					imageBg2: 'url(' + require('@/static/style2/zh14.png') + ')',
					imageBg1: 'ur3(' + require('@/static/style1/zh5.png') + ')',
					imageBg2: 'ur4(' + require('@/static/style2/zh5.png') + ')',
				},
				btnItem: [{
						btn: '保存二维码',
						imageBg1: 'url(' + require('@/static/style1/zh5.png') + ')',
						imageBg2: 'url(' + require('@/static/style2/zh5.png') + ')',
					},
					{
						btn: '复制链接',
						imageBg1: 'url(' + require('@/static/style1/zh5.png') + ')',
						imageBg2: 'url(' + require('@/static/style2/zh5.png') + ')'
					},

				]
			}
		},
		methods: {
			goPoints() {
				uni.navigateTo({
					url: '/pages/feature/points/points'
				})
			},
			onExtend() {
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				})
			}
		},
		computed: {
			...mapState('theme', ['currentBackground'])
		}

	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #11112B;
		color: #fff;
		height: 100vh;
		width: 100vw;

		// overflow: hidden;

		.body {
			width: 100%;
			// height: 30vh;
			// border: 1px solid red;

			.info {
				// border: 1px solid blue;
				width: 80%;
				margin: 0 auto;
				margin-top: 100rpx;

				.username {
					// border: 1px solid red;
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 120rpx;

					.user-left,
					.user-right {
						flex-shrink: 0;
						width: 50px;
						text-align: center;
					}

					.user-center {
						text-align: center;
					}

					.bg1 {}
				}

				.man {
					height: 100rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 30rpx;

					.bg {
						height: 100%;
						width: 150rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}


			}

			.code {

				width: 464rpx;
				margin: 50rpx auto;

				image {
					width: 100%;
				}
			}

			.btn {
				// width: 80%;
				margin: 0 auto;
				// border: 1px solid red;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.btn-item {
					display: flex;
					justify-content: center;
					align-items: center;
					// border: 1px solid blue;
					height: 80rpx;
					width: 260rpx;

					background-repeat: no-repeat;
					background-position: center center;
					background-size: 260rpx 80rpx;
				}
			}
		}
	}
</style>